<script setup lang="ts">
import type { TemplateDetail } from '@/types/template'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTemplateDetailApi } from '@/services/template'
import { useMemberStore } from '@/stores'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 指示点
const activeIndex = ref(0)
const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail!.current
}

//接收页面参数
const query = defineProps<{ id: number; user_id: number }>()

// 获取线路明细
const template = ref<TemplateDetail>()
const getTemplateDetailData = async () => {
  const res = await getTemplateDetailApi(query.id)
  template.value = res.data
}

// 立即预定
const onNext = (id: number) => {
  uni.navigateTo({ url: `/pages/template/route?id=${id}` })
}

// 页面加载
onLoad(async () => {
  await Promise.all([getTemplateDetailData()])

  // 本地保存推荐人ID，登录时使用
  if (query.user_id != null && query.user_id != 0) {
    let userId = 0
    // 获取会员信息
    const memberStore = useMemberStore()
    if (memberStore.profile != null) {
      userId = memberStore.profile.id
    }
    if (query.user_id != userId) {
      uni.setStorageSync('parent_id', query.user_id)
    }
  }
})
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
      <swiper-item v-for="it in template?.pics" :key="it">
        <image mode="aspectFill" class="image" :src="it"></image>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(it, index) in template?.pics"
        :key="it"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
    <view class="code">产品编号：{{ template?.code }}</view>
    <view class="tags">
      <view :class="`tag tag${index}`" v-for="(tag, index) in template?.tags" :key="tag">
        {{ tag }}
      </view>
    </view>
  </view>
  <view class="template-title-bar">
    <view class="title">{{ template?.name }}</view>
    <view class="market-price">
      <text class="c-main"
        >￥<text>{{ template?.market_price }}</text></text
      >起
    </view>
  </view>
  <view class="destination">全国出发 | {{ template?.city_name }}</view>
  <view class="box">
    <view class="title">行程特色</view>
    <up-parse :content="template?.feature" class="content" />
    <view class="title">行程明细</view>
    <view class="detail" v-for="(it, index) in template?.details" :key="it.id">
      <view class="caption">
        <text class="hx-font hx-point"></text>D{{ index + 1 }} {{ it.title }}
      </view>
      <up-parse :content="it.content" class="content" />
      <view class="sub-title"><text class="hx-font hx-stay"></text>住宿</view>
      <view class="content u-p-l-40">{{ it.stay }}</view>
      <view class="sub-title"><text class="hx-font hx-dinner"></text>餐饮</view>
      <view class="content u-p-l-40">{{ it.dinner }}</view>
    </view>
    <view class="title">费用包含</view>
    <up-parse :content="template?.fee_include" class="content" />
    <view class="title">费用不包含</view>
    <up-parse :content="template?.fee_exclude" class="content" />
    <view class="title">须知及退改</view>
    <up-parse :content="template?.note" class="content" />
  </view>
  <up-gap height="100" />

  <!-- 用户操作 -->
  <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <view class="icons">
      <navigator
        url="/pages/index/index"
        open-type="switchTab"
        hover-class="none"
        class="icons-button"
      >
        <up-icon name="home" size="28" />首页
      </navigator>
      <button class="icons-button" open-type="share">
        <up-icon name="share-square" size="28" />分享
      </button>
      <!-- #ifdef MP-WEIXIN -->
      <button class="icons-button" open-type="contact">
        <up-icon name="chat" size="28" />客服
      </button>
      <!-- #endif -->
    </view>
    <view class="buttons">
      <view class="buynow" @click="onNext(template!.id)"> 立即预定 </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import './styles/see.scss';
</style>
